import Vue from 'vue/dist/vue.esm' // 引入带编译器的版本
console.log(Vue)
new Vue({
  el: '#app',
  // template: `
  //   <div id="a" name="b" key="aa">
  //     <h2 key="bb">{{msg}}</h2><span>abc</span>
  //   </div>
  // `,
  data: {msg: 'abc'},
  render: function(h) {
    console.log(h)
    // tag / data / children / key

    // 使用jsx创建虚拟节点
    let vnode = (
      <div id="a" name="b" key='aa'>
          <h2 key="bb">{this.msg}</h2><span>abc</span>
      </div>
    )
    // 使用h函数创建虚拟节点
    vnode = h(
      'div',  // 标签名
      {attrs: {id: 'aa', name: 'bb'}, key: 'aaaa'},  // data
      [
        h('h2', {key: 'bbbb'}, this.msg),
        h('span', {}, 'abc'),
      ]
    )

    console.log(vnode)
    return vnode
  }
})
